<template>
  <el-card class="ranking-card">
    <template #header>
      <div class="card-header">
        <span>歌单歌曲</span>
        <el-button-group>
            <el-button   type="danger" round @click="playAll(songList)">播放全部</el-button>
            <el-button type="danger" round @click="addList(songList)">
                <el-icon ><Plus /></el-icon>
            </el-button>
        </el-button-group>
        
      </div>
    </template>

    <div class="card-body">
      <el-table style="width:100%;" v-loading="isLoading" :data="songList" :stripe="true" size="large" @row-dblclick="addSong">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="歌名" min-width="200">
          <template #default="scope">
            <span>{{scope.row.song ?scope.row.song.name : scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌手" min-width="120" sortable >
          <template #default="scope">
            <span>{{scope.row.song ?scope.row.song.ar[0].name :scope.row.ar[0].name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="专辑" min-width="180">
          <template #default="scope">
            <span>{{scope.row.song ?scope.row.song.al.name :scope.row.al.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="时长" min-width="180">
          <template #default="scope">
            <span>{{timeFilter(scope.row.song ?scope.row.song.dt :scope.row.dt ) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import RankingMusicItem from "./Ranking-Music-Item.vue";
import { timeFilter, formatZero } from "../../hooks/use-time-filter";
import usePlayAll from "../../hooks/usePlayAll";
import useAddAll from "../../hooks/useAddAll";
import { useStore } from 'vuex'
import { getSongUrl} from '../../hooks/song-url'
import {createSong} from '../../class/Song'

export default defineComponent({
  setup() {

    const store = useStore();


    const addSong = (songInfo) => {
       console.log("往播放列表中添加一首歌曲");

        songInfo = songInfo.song? songInfo.song : songInfo;

        songInfo.songUrl = getSongUrl(songInfo.id)

        const song =  createSong(songInfo)

        store.dispatch('addSong',song)


    };

    const playAll = (songList) =>{//播放全部歌曲,将播放列表中原有歌曲清空

        
        usePlayAll(songList);
    }
    const addList = (songList) => {//将歌单歌曲添加进播放列表中,不影响播放列表中其他歌曲

        useAddAll(songList)
    }

    return {
      timeFilter,
      addSong,
      usePlayAll,
      playAll,
      addList
    };
  },
  props: {
    songList: {
      type: Array,
    },
    isLoading:{
        type: Boolean
    },
  },
  components: { RankingMusicItem },
});
</script>
 
<style lang  = "scss" scoped>
@import "../../assets/css/ranking-card.scss";
</style>